<template>
  <div class="game-board">
    <div class="board-container">
      <!-- 上边一行 -->
      <div class="board-row top-row">
        <div v-for="index in 9" :key="`top-${index}`"
             class="board-cell" 
             :class="[getCellClass(index - 1), { 'has-player': hasPlayerOnCell(index - 1) }]">
          <div class="cell-content">
            <div class="cell-name">{{ boardCells && boardCells[index - 1] ? boardCells[index - 1].name : '' }}</div>
            <div v-if="boardCells && boardCells[index - 1] && boardCells[index - 1].price" class="cell-price">{{ boardCells[index - 1].price }}元</div>
          </div>
          <div v-if="hasPlayerOnCell(index - 1)" class="player-tokens">
            <div v-for="player in getPlayersOnCell(index - 1)" :key="player.id"
                 class="player-token" 
                 :class="[
                   `player-token-${player.id}`,
                   { 'player-moving': isCurrentPlayer(player) && isMoving }
                 ]">
              {{ player.name.charAt(0) }}
            </div>
          </div>
        </div>
      </div>
      
      <!-- 中间部分 -->
      <div class="board-middle">
        <!-- 左边一列 -->
        <div class="board-column left-column">
          <div v-for="index in 7" :key="`left-${index}`"
               class="board-cell" 
               :class="[getCellClass(32 - index), { 'has-player': hasPlayerOnCell(32 - index) }]">
            <div class="cell-content">
              <div class="cell-name">{{ boardCells && boardCells[32 - index] ? boardCells[32 - index].name : '' }}</div>
              <div v-if="boardCells && boardCells[32 - index] && boardCells[32 - index].price" class="cell-price">{{ boardCells[32 - index].price }}元</div>
            </div>
            <div v-if="hasPlayerOnCell(32 - index)" class="player-tokens">
              <div v-for="player in getPlayersOnCell(32 - index)" :key="player.id"
                   class="player-token" 
                   :class="[
                     `player-token-${player.id}`,
                     { 'player-moving': isCurrentPlayer(player) && isMoving }
                   ]">
                {{ player.name.charAt(0) }}
              </div>
            </div>
          </div>
        </div>
        
        <!-- 中央区域 -->
        <div class="board-center">
          <!-- 玩家信息面板 -->
          <div class="player-panel">
            <div v-for="(player, idx) in players" :key="`panel-${idx}`"
                 class="player-info-card"
                 :class="[`player-${player.id}`, { 'active-player': isCurrentPlayer(player) }]">
              <div class="player-avatar">
                <img :src="player.avatar" alt="玩家头像" />
              </div>
              <div class="player-details">
                <div class="player-name">{{ player.name }}</div>
                <div class="player-money">
                  <span class="money-icon">💵</span>
                  {{ player.money }}
                </div>
              </div>
              <div v-if="isCurrentPlayer(player)" class="current-player-indicator">
                <span>当前回合</span>
              </div>
            </div>
          </div>
          
          <!-- 骰子区域 -->
          <div class="dice-container" @click="rollDice" :class="{ 'rolling': isRolling }">
            <img v-if="!isRolling" :src="`/images/dice-${diceValue}.svg`" alt="骰子" class="dice-image" />
            <div v-else class="dice-placeholder">
              <span>?</span>
            </div>
          </div>
          <div class="dice-text">{{ buttonText }}</div>
        </div>
        
        <!-- 右边一列 -->
        <div class="board-column right-column">
          <div v-for="index in 7" :key="`right-${index}`"
               class="board-cell" 
               :class="[getCellClass(8 + index), { 'has-player': hasPlayerOnCell(8 + index) }]">
            <div class="cell-content">
              <div class="cell-name">{{ boardCells && boardCells[8 + index] ? boardCells[8 + index].name : '' }}</div>
              <div v-if="boardCells && boardCells[8 + index] && boardCells[8 + index].price" class="cell-price">{{ boardCells[8 + index].price }}元</div>
            </div>
            <div v-if="hasPlayerOnCell(8 + index)" class="player-tokens">
              <div v-for="player in getPlayersOnCell(8 + index)" :key="player.id"
                   class="player-token" 
                   :class="[
                     `player-token-${player.id}`,
                     { 'player-moving': isCurrentPlayer(player) && isMoving }
                   ]">
                {{ player.name.charAt(0) }}
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 下边一行 -->
      <div class="board-row bottom-row">
        <div v-for="index in 9" :key="`bottom-${index}`"
               class="board-cell" 
               :class="[getCellClass(25 - index), { 'has-player': hasPlayerOnCell(25 - index) }]">
            <div class="cell-content">
              <div class="cell-name">{{ boardCells && boardCells[25 - index] ? boardCells[25 - index].name : '' }}</div>
              <div v-if="boardCells && boardCells[25 - index] && boardCells[25 - index].price" class="cell-price">{{ boardCells[25 - index].price }}元</div>
            </div>
            <div v-if="hasPlayerOnCell(25 - index)" class="player-tokens">
              <div v-for="player in getPlayersOnCell(25 - index)" :key="player.id"
                   class="player-token" 
                   :class="[
                     `player-token-${player.id}`,
                     { 'player-moving': isCurrentPlayer(player) && isMoving }
                   ]">
                {{ player.name.charAt(0) }}
              </div>
            </div>
          </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'GameBoard',
  props: {
    boardCells: {
      type: Array,
      required: true
    },
    players: {
      type: Array,
      required: true
    },
    currentPlayerIndex: {
      type: Number,
      required: true
    },
    disabled: {
      type: Boolean,
      default: false
    },
    isMoving: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      diceValue: 6,
      isRolling: false,
      buttonText: '点击骰子开始游戏'
    };
  },
  methods: {
    hasPlayerOnCell(cellIndex) {
      return this.players && this.players.some(player => player && player.position === cellIndex);
    },
    getPlayersOnCell(cellIndex) {
      return this.players ? this.players.filter(player => player && player.position === cellIndex) : [];
    },
    getCellClass(index) {
      if (this.boardCells && index >= 0 && index < this.boardCells.length && this.boardCells[index]) {
        return this.boardCells[index].type;
      }
      return '';
    },
    isCurrentPlayer(player) {
      return this.players && player ? this.players.indexOf(player) === this.currentPlayerIndex : false;
    },
    rollDice() {
      if (this.isRolling || this.disabled) return;
      
      this.isRolling = true;
      this.buttonText = '骰子正在转动...';
      
      // 模拟骰子滚动
      const rollInterval = setInterval(() => {
        this.diceValue = Math.floor(Math.random() * 6) + 1;
      }, 100);
      
      // 1秒后停止滚动
      setTimeout(() => {
        clearInterval(rollInterval);
        this.isRolling = false;
        this.buttonText = '点击骰子继续游戏';
        
        // 发出事件，通知父组件骰子的值
        this.$emit('rolled', this.diceValue);
      }, 1000);
    }
  }
};
</script>

<style scoped>
.game-board {
  margin: 20px 0;
  display: flex;
  justify-content: center;
}

.board-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 600px;
  aspect-ratio: 1 / 1;
  background-color: #a8d5a3;
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.board-row {
  display: flex;
  height: 70px;
}

.board-middle {
  display: flex;
  flex: 1;
}

.board-column {
  display: flex;
  flex-direction: column;
  width: 70px;
}

.board-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  margin: 10px;
}

.top-row, .bottom-row {
  justify-content: space-between;
}

.left-column, .right-column {
  justify-content: space-between;
}

.board-cell {
  width: 65px;
  height: 65px;
  background-color: #e8f5e9;
  border: 1px solid #a5d6a7;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 5px;
  position: relative;
  font-size: 12px;
  text-align: center;
  transition: all 0.3s;
  margin: 2px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.board-cell:hover {
  transform: scale(1.05);
  z-index: 10;
}

.property { background-color: #ffecb3; }
.chance { background-color: #bbdefb; }
.tax { background-color: #ffcdd2; }
.transport { background-color: #d1c4e9; }
.utility { background-color: #b2dfdb; }
.start { background-color: #c8e6c9; }
.jail, .go-to-jail { background-color: #ffccbc; }
.free-parking { background-color: #f0f4c3; }

.has-player {
  border: 2px solid #ff9800;
  box-shadow: 0 0 5px rgba(255, 152, 0, 0.5);
}

.cell-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.cell-name {
  font-weight: bold;
  margin-bottom: 3px;
  font-size: 10px;
}

.cell-price {
  font-size: 9px;
  color: #666;
}

.player-tokens {
  position: absolute;
  top: -5px;
  right: -5px;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  max-width: 50px;
}

.player-token {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-weight: bold;
  font-size: 10px;
  transition: all 0.3s ease;
}

/* 玩家移动时的动画效果 */
@keyframes playerMoving {
  0% { transform: scale(1); box-shadow: 0 0 0 rgba(255, 255, 255, 0); }
  50% { transform: scale(1.3); box-shadow: 0 0 10px rgba(255, 255, 255, 0.8); }
  100% { transform: scale(1); box-shadow: 0 0 0 rgba(255, 255, 255, 0); }
}

.player-moving {
  animation: playerMoving 0.6s infinite;
}

.player-token-1 { background-color: #e53935; }
.player-token-2 { background-color: #1e88e5; }
.player-token-3 { background-color: #43a047; }

.player-moving {
  animation: moveAnimation 0.8s infinite alternate;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.9);
  z-index: 100;
}

@keyframes moveAnimation {
  0% { transform: scale(1) translateY(0); }
  50% { transform: scale(1.3) translateY(-5px); }
  100% { transform: scale(1.1) translateY(0); }
}

/* 中央区域样式 */
.player-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  background-color: #424242;
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  margin-bottom: 20px;
}

.player-info-card {
  display: flex;
  align-items: center;
  color: white;
  padding: 8px 12px;
  border-radius: 8px;
  position: relative;
  transition: transform 0.3s;
}

.player-info-card:hover {
  transform: translateY(-2px);
}

.player-1 { background-color: #e53935; }
.player-2 { background-color: #1e88e5; }
.player-3 { background-color: #43a047; }

.active-player {
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
  transform: scale(1.05);
}

.player-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  background-color: #fff;
  border: 2px solid white;
  margin-right: 10px;
}

.player-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.player-details {
  flex-grow: 1;
}

.player-name {
  font-weight: bold;
  margin-bottom: 5px;
}

.player-money {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  font-weight: bold;
}

.current-player-indicator {
  position: absolute;
  top: -10px;
  right: 10px;
  background-color: #ffc107;
  color: #333;
  padding: 3px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: bold;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* 骰子区域样式 */
.dice-container {
  width: 80px;
  height: 80px;
  background-color: white;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  border: 3px solid #ff5722;
  overflow: hidden;
  margin-bottom: 10px;
}

.dice-container:hover {
  transform: scale(1.05);
  transition: transform 0.2s;
}

.dice-container.rolling {
  animation: shake 0.5s infinite;
}

.dice-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.dice-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40px;
  color: #ff5722;
  font-weight: bold;
}

@keyframes shake {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(5deg); }
  50% { transform: rotate(0deg); }
  75% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}

.dice-text {
  font-size: 14px;
  color: #666;
  text-align: center;
}
</style>
